<template>
  <div class="home">
    <!-- 顶部信息 -->
    <div class="header">
      <HeaderComponents />
    </div>
    <!-- 内容区域 -->
    <div class="main">
      <!-- 内容区域 -->
      <div class="nav">
        <!-- 导航显示区域 -->
        <router-view name="sidebar"></router-view>
      </div>
      <div class="content">
        <!-- 页面显示区域 -->
        <v-tags></v-tags>
        <div class="grid-content bg-purple-light">
          <transition name="fade" mode="out-in">
            <keep-alive :include="tagsList">
              <router-view></router-view>
            </keep-alive>
          </transition>
          <el-backtop target=".grid-content"></el-backtop>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderComponents from "@/components/HeaderComponents.vue";
import vTags from "@/components/nav/Tags.vue";
import bus from "@/components/nav/bus";

export default {
  name: "HomeView",
  components: {
    HeaderComponents,
    vTags,
  },
  data() {
    return {
      tagsList: this.$store.getters.cachedTags, //[],      
    };
  },
  created() {
    bus.$on("content-collapse", (msg) => {
      this.collapse = msg;
    });
    //监听数据 bus.$on("tags",msg={ }) msg中是获取的上文中的集合数据
    // 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
    bus.$on("tags", (msg) => {
      let arr = [];
      for (let i = 0, len = msg.length; i < len; i++) {
        msg[i].name && arr.push(msg[i].name);
      }
      //this.tagsList = arr;
      this.$store.getters.cachedTags = arr;
    });
  }
};
</script>
<style scoped>
.header {
  width: 100%;
  height: 90px;
  background-color: rgb(3, 95, 187);
}

.main {
  width: 100%;
  background-color: cornflowerblue;
  height: calc(100vh - 90px);
  display: flex;
  position: relative;
}

.nav {
  /*设置导航栏为黏性定位 */
  position: sticky;
  top: 0px;
  width: 220px;
  background-color: rgb(13, 116, 219);
}

.content {
  width: 100%;
  height: 100%;
  margin-bottom: 50px;
  background-color: rgb(236, 245, 255);
  overflow-y: hidden;
  z-index: 99;
}

.item {
  height: 800px;
}

.grid-content {
  border-radius: 2px;
  background-color: #fff;
  width: auto;
  height: 100%;
  padding: 10px;
  overflow-y: scroll;
}
</style>
